<template>

    <div class="product-details">
        <div>
            <button class="back-to-home" @click="goToHome">返回首页</button>
        </div>
        <div v-if="product" class="product-container">
            <img :src="product.imageUrl" :alt="product.name" class="product-image">
            <div class="product-info">
                <h1>{{ product.name }}</h1>
                <p class="description">{{ product.description }}</p>
                <p class="price">￥{{ product.price }}</p>
                <p class="stock">库存: {{ product.stock }}</p>
                <p class="status">状态: {{ product.status === 1 ? '上架' : '下架' }}</p>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
        <div v-else class="loading">加载中...</div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        const product = ref(null);

        const fetchProductDetails = async () => {
            try {
                const response = await axios.get(`http://localhost:8080/product/getProductById/${route.params.id}`);
                if (response.data.code === 200) {
                    product.value = response.data.data;
                } else {
                    console.error('获取商品详情失败:', response.data.msg);
                }
            } catch (error) {
                console.error('获取商品详情异常:', error);
            }
        };

        const goToHome = () => {
            router.push('/');
        };

        onMounted(() => {
            fetchProductDetails();
        });

        return {
            product,
            goToHome
        };
    }
};
</script>

<style scoped>
.product-details {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

.back-to-home {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #1baeae;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.back-to-home:hover {
    background-color: #158f8f;
}

.product-container {
    display: flex;
    gap: 20px;
}

.product-image {
    width: 50%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.product-info {
    flex: 1;
}

h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.description {
    margin-bottom: 15px;
    color: #666;
}

.price {
    font-size: 20px;
    font-weight: bold;
    color: #f66;
    margin-bottom: 10px;
}

.stock,
.status {
    margin-bottom: 5px;
    color: #333;
}

.add-to-cart {
    background-color: #1baeae;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

.add-to-cart:hover {
    background-color: #158f8f;
}

.loading {
    text-align: center;
    font-size: 18px;
    color: #666;
}
</style>
